<template>
  <div class="chat">
    <div class="icon"><svg-icon iconClass="back" @click="goBack()"></svg-icon></div>
    <div class="input">
      <textarea
        style="border:none"
      >
      </textarea>
      <img src="../../img/person.png" alt="" />
    </div>
    <div class="word">
      <img src="../../img/word.png" alt="" />
    </div>
  </div>
</template>
<script>
export default {
  methods:{
    goBack(){
      this.$router.go(-1)
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@css/style.scss";
.chat {
  width: 100%;
  height: 100%;
  .icon {
    width: 100%;
    height: 10%;
    padding: px2rem(15) 0 px2rem(10) px2rem(20);
    font-size: px2rem(30);
    border-bottom: 1px solid #e6e6e6;
  }
  .input {
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: space-between;
    img {
      width: 20%;
      height: px2rem(50);
      display: block;
      margin-right: 5%;
      margin-top: 10%;
    }
    textarea {
      width: 70%;
      height:90%;
         margin-top: 10%;
         font-size: px2rem(22);
    }
  }
  .word{
      width: 100%;
      height: 40%;
      img{
          display: block;
          width: 100%;
          height: 100%;
      }
  }
}
</style>